<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <div class="position-relative">
        <!-- 选项 -->
        <ul class="nav nav-tabs mb-3">
          <li class="nav-item">
            <router-link class="nav-link position-relative" to="/letter">
              朋友私信
              <span class="badge badge-danger" v-if="letterUnreadCount > 0">{{ letterUnreadCount }}</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link position-relative active" to="/notice">
              系统通知
              <span class="badge badge-danger" v-if="noticeUnreadCount > 0">{{ noticeUnreadCount }}</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 通知列表 -->
      <ul class="list-unstyled">
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="notice.commentNotice">
          <span class="badge badge-danger" v-if="notice.commentNotice.unreadCount > 0">{{ notice.commentNotice.unreadCount }}</span>
          <img src="http://static.nowcoder.com/images/head/reply.png" class="mr-4 user-header" alt="通知图标">
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span>评论</span>
              <span class="float-right text-muted font-size-12">{{ notice.commentNotice.message.createTime }}</span>
            </h6>
            <div>
              <router-link to="/notice/detail/comment">用户 <i>{{ notice.commentNotice.user.username }}</i> 评论了你的<b>帖子</b> ...</router-link>
              <ul class="d-inline font-size-12 float-right">
                <li class="d-inline ml-2"><span class="text-primary">共 <i>{{ notice.commentNotice.count }}</i> 条会话</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="notice.likeNotice">
          <span class="badge badge-danger" v-if="notice.likeNotice.unreadCount > 0">{{ notice.likeNotice.unreadCount }}</span>
          <img src="http://static.nowcoder.com/images/head/like.png" class="mr-4 user-header" alt="通知图标">
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span>赞</span>
              <span class="float-right text-muted font-size-12">{{ notice.likeNotice.message.createTime }}</span>
            </h6>
            <div>
              <router-link to="/notice/detail/like">用户 <i>{{ notice.likeNotice.user.username }}</i> 点赞了你的<b>帖子</b> ...</router-link>
              <ul class="d-inline font-size-12 float-right">
                <li class="d-inline ml-2"><span class="text-primary">共 <i>{{ notice.likeNotice.count }}</i> 条会话</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="notice.followNotice">
          <span class="badge badge-danger" v-if="notice.followNotice.unreadCount">{{ notice.followNotice.unreadCount }}</span>
          <img src="http://static.nowcoder.com/images/head/follow.png" class="mr-4 user-header" alt="通知图标">
          <div class="media-body">
            <h6 class="mt-0 mb-3">
              <span>关注</span>
              <span class="float-right text-muted font-size-12">{{ notice.followNotice.message.createTime }}</span>
            </h6>
            <div>
              <router-link to="/notice/detail/follow">用户 <i>{{ notice.followNotice.user.username }}</i> 关注了你 ...</router-link>
              <ul class="d-inline font-size-12 float-right">
                <li class="d-inline ml-2"><span class="text-primary">共 <i>{{ notice.followNotice.count }}</i> 条会话</span></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Notice from '@/api/notice'
import Letter from '@/api/letter'

const notice = ref({})

const noticeUnreadCount = ref(0)

const letterUnreadCount = ref(0)

onMounted(async() => {
  getNoticeList()
})

const getNoticeList = async () => {
  Notice.getNoticeList().then(res => {
    notice.value = res
    getNoticeUnreadCount()
    getLetterUnreadCount()
  })
}

const getNoticeUnreadCount = async () => {
  Notice.getNoticeUnreadCount().then(res => {
    noticeUnreadCount.value = res
  })
}

const getLetterUnreadCount = async () => {
  Letter.getLetterUnreadCount().then((res) => {
    letterUnreadCount.value = res
  })
}

</script>
